<template>
    <div>
        <Custom></Custom>
        <el-color-picker
                v-model="color"
                show-alpha
                @change =setStyleColor()
                :predefine="predefineColors">
        </el-color-picker>
    </div>

</template>

<script>
    import Custom from '@/edus/account/settings/CustomStyle'
    export default {
        name: "Custom.vue",
        components: { Custom},
        data(){
            return{
                color: '#1e90ff',
                predefineColors: [
                    '#c71585',
                    '#F5222D',
                    '#FA541C',
                    '#FAAD14',
                    '#13C2C2',
                    '#52C41A',
                    '#1e90ff',
                    '#2F54EB',
                    '#722ED1',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    '#c7158577'
                ],
            }
        },
        methods:{
            //设置主题颜色
            setStyleColor(node) {
                window.less.modifyVars({
                    "@primary-color": this.color
                });
            },
        },
        mounted(){
        }
    }
</script>

<style scoped>

</style>
